<!-- 我的朋友 -->
<template>
  <div id="">
    <router-view class="childrenPage"></router-view>

    <headerbox :headerTitle="'我的朋友'" :hasBack='true' :addIcon="true" @addEvent="addEvent"></headerbox>
    <searchTemplate @toSearchFriend="toSearchFriend"></searchTemplate>
    <rightBread :letter="letter" @rightLetter="rightLetter"></rightBread>

    <ul class="formList">
      <li @click="toApplyFriend" ><span>新朋友</span></li>
    </ul>
    <noneList v-if="friendsList.length==0" :noneTxt="'您还没有好友，快去添加好友吧~'"></noneList>
    <!-- <p ref="{{ele}}" v-for="ele in letter" :key="ele.key" :id="ele">{{ele}}</p> -->
    <div class="friendList" v-for="(friend,idx) in friendsList" :key="friend.key">
      <p :id="friend.letter">{{friend.letter}}</p>
      <div class="friend" v-for="(user,index) in friend.users" :key="user.key"
      data-type="0">
        <div class=""
        @touchstart.capture="touchstart"
        @touchmove.capture="touchmove"
        @touchend.capture="touchend" @click.stop="toRongyunChat(user.id)">
          <img :src="imgUrlLink(user.headPortrait)" alt="">
          <span>{{user.nickName}}</span>
          <em v-if="user.id==memberId" class="myself">本人</em>
        </div>
        <em class="del" @click="delItem(idx,index)">删除</em>
      </div>
    </div>
  </div>
</template>
<script>
import {toChildrenPage} from '@/utils/util.js';
import {circleFriendList,circleFriendDel} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    friendsList:[],
    letter:[],
    memberId:'',

    startPoi:0,
    endPoi:0,
  }),
  components: {
    searchTemplate:()=>import('@/components/searchTemplate/searchTemplate'),
    rightBread:()=>import('@/components/rightBread/rightBread'),
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    ...mapMutations(['setRongLoad']),
    touchstart(e){        //滑动开始
      this.startPoi = e.touches[0].clientX;   //记录当前位置
    },
    touchmove(e) {      //滑动中
      // console.log(e);
    },
    touchend(e) {       //滑动结束
      // console.log(e);
      let parentElement = e.currentTarget.parentElement;    //获取父元素
      this.endPoi = e.changedTouches[0].clientX;    //记录结束位置
      if( parentElement.dataset.type == 0 && this.startPoi - this.endPoi > 30 ){  //左滑
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      if( parentElement.dataset.type == 1 && this.startPoi - this.endPoi < -30 ){ // 右滑
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startPoi = 0;
      this.endPoi = 0;
    },
    //判断当前是否有滑块处于滑动状态
    checkSlide(){
      let listItems = document.querySelectorAll('.friend');
      for( let i = 0 ; i < listItems.length ; i++){
        if( listItems[i].dataset.type == 1 ) {
          return true;
        }
      }
      return false;
    },
   //复位滑动状态
   restSlide(){
    let listItems = document.querySelectorAll('.friend');
               // 复位
    for( let i = 0 ; i < listItems.length ; i++){
      listItems[i].dataset.type = 0;
    }
   },
    // 获取好友列表
    getFriendList() {
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      circleFriendList({token:xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        let letterArr = [];
        if (res) {
          let friendsList = res.data.result;
          self.friendsList = friendsList;
          for (var key in friendsList) {
            letterArr.push(friendsList[key].letter);
          }
          self.letter = letterArr;
          console.log(self.letter);
          // 数组去重
          // let r = letterArr.filter(function(element,index,self){
          //  return self.indexOf(element) === index;
          // });
        }
      })
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    //搜索
    toSearchFriend() {
    this.$router.push({name:'searchFriend'});
    },
    // 添加好友
    addEvent(data) {
      // toChildrenPage(this,'addFriend');
      this.$router.push({name:'addFriend'});
    },
    // 好友申请列表
    toApplyFriend() {
      this.$router.push({name:'applyFriend'})
    },
    // 进入聊天界面
    toRongyunChat(targetId ) {
      if (targetId==this.memberId) {
        // this.toast('这是你本人')
        return false;
      }
      this.$router.push({path:'/rongyunChat',query:{targetId:targetId }});
      // this.setRongLoad(true);
    },
    // 点击右边字母导航，跳转到对应的部分高度
    rightLetter(data) {
      var anchor = document.getElementById(data);
      let _top = anchor.offsetTop - 90;
      window.scrollTo(0,_top)
    },
    // 删除好友
    delItem(parentIdx,index) {    //parentIdx字母排列序号，index当前字母模块下的数组序号
      let self = this;
      let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
      let friendsList = this.friendsList;   //所有好友列表
      let letterFriend = friendsList[parentIdx].users;    //所在的字母序号数组

      if (letterFriend[index].id == xlyd_loginInfo.id) {
        self.toast('本人账号');
        return false;
      }
      console.log(letterFriend);
      let delParam = {
        token:xlyd_loginInfo.token,
        userId:letterFriend[index].id,
      }
      self.messageBox.confirm('确认删除该好友?').then(action=>{
        circleFriendDel(delParam).then(res=>{
          console.log(res);
          if(res) { //删除成功
            self.toast(res.data.msg);
            this.friendsList[parentIdx].users.splice(index,1);
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.memberId = xlyd_loginInfo.id;
    this.getFriendList();
  }

}
</script>
<style lang="scss" scoped>
.friendList{
  overflow: hidden;
  p{
    padding: 4px 10px;
  }
}
.friend[data-type="0"]{
  transform: translate3d(0,0,0);
}
.friend[data-type="1"]{
  transform: translate3d(-60px,0,0);
}
.friend{
  border-bottom: 1px solid $borderColor;
  width: 100%;
  background: white;
  position: relative;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  div{
    @include flex;
    overflow: hidden;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 10px;
  }
  .myself{
    position: absolute;
    right: 10px;
    top: 0;
    height: 50px;
    line-height: 50px;
    color: $redColor;
    font-size: 12px;
    font-weight: bold;
  }
  .del{
    position: absolute;
    height: 100%;
    line-height: 60px;
    width: 60px;
    text-align: center;
    background: $redColor;
    color: white;
    right: -60px;
    top: 0;
    z-index: 2;
  }
}
</style>
